<template>
  <div class="center pt-ab login_box cp">
    <div class="logo mb-3">
      <img src="@/assets/images/login/bgLogo.png" alt="" />
    </div>
    <div class="login br-1 bs-bb">
      <div class="login_head grid-2 txt-c">
        <div
          class="title"
          v-for="i in title"
          :key="i.id"
          @click="choiceLogin(i.id)"
        >
          {{ i.name }}
        </div>
        <div :class="cueentTab == 1 ? 'move_left' : 'move_right'"></div>
      </div>
      <div class="login_input pt-re">
        <el-form
          :rules="verificationRules"
          ref="verificationForm"
          :model="verificationForm"
          v-if="cueentTab == 1"
        >
          <el-form-item prop="mobile">
            <el-input
              placeholder="请输入账户/手机/邮箱"
              v-model="verificationForm.mobile"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              placeholder="请输入验证码"
              v-model="verificationForm.code"
            >
              <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <div class="get_code" @click="getCode" v-if="timerTf">获取验证码</div>
          <div class="get_code" v-else>{{ countDownNum }} 秒后重新获取</div>
        </el-form>
        <el-form
          v-else
          :rules="passwordRules"
          ref="passwordForm"
          :model="passwordForm"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="请输入账户/手机/邮箱"
              v-model="passwordForm.username"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              show-password
              v-model="passwordForm.password"
            >
              <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button
        class="login_btn txt-c"
        @click="submitForm"
        :loading="btnLoading"
        >登录</el-button
      >
      <div class="other_login">
        <div
          v-for="i in other_login"
          :id="i.id ? i.id : null"
          :key="i.id"
          @click="otherLoginFn(i.id)"
        >
          {{ i.name }}
        </div>
      </div>
      <div class="privacy">
        注：未注册手机验证后自动登录 注册即代表同意《服务条款》
      </div>
    </div>
    <el-dialog
      title="实名认证"
 
      :visible.sync="dialogVisible"
      :append-to-body="true"
    >
      <div
        style="
          text-align: center;
          margin: 2rem 0;
          font-size: 20px;
          font-weight: 600;
        "
      >
        资质状态：{{ zz_shenhe }}
      </div>
      <div class="f-row ai-c jc-c">
        <div class="mr-2 classQe">
          <div id="qrCode " ref="qrCodeUrlAndroid"></div>
          <div class="mt-2 txt-c">Android下载</div>
        </div>
        <div>
          <div id="qrCode" ref="qrCodeUrlIOS"></div>
          <div class="mt-2 txt-c">IOS下载</div>
        </div>
      </div>
      <div class="txt-c mt-2">请识别二维码下载APP进行实名认证！</div>
    </el-dialog>
    <!-- 

      15086698531
     -->
  </div>
</template>


<script>
import QRCode from "qrcodejs2";
import {
  login_infofn,
  export_infofn,
  psw_login,
  code_login,
  get_code,
  expert_QRCode,
} from "@/request/api";
/* import QC from "qc"; */
export default {
  data() {
    return {
      zz_shenhe: "",
      dialogVisible: false,

      cueentTab: 1,
      other_login: [
        {
          id: 1,
          name: "微信登录",
        },
        {
          id: 2,
          name: "QQ登录",
          id: "qqLoginBtn",
        },
        {
          id: 3,
          name: "微博登录",
        },
      ],
      title: [
        {
          id: 1,
          name: "验证码登录",
        },
        {
          id: 2,
          name: "密码登录",
        },
      ],
      //验证码表单
      verificationForm: {
        mobile: "",
        code: null,
      },
      //密码登录表单
      passwordForm: {
        username: null,
        password: null,
      },
      verificationRules: {
        mobile: [
          {
            required: true,
            message: "请输入账户/手机/邮箱",
            trigger: "change",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "change" }],
      },
      passwordRules: {
        username: [
          {
            required: true,
            message: "请输入账户/手机/邮箱",
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
      countDownNum: null,
      timerTf: true,
      timer: null,
      btnLoading: false,
    };
  },
  mounted() {
    /*   QC.Login({
      btnId: "qqLoginBtn",
    }); */
  },
  methods: {
    //生成二维码  安卓
    creatQrCodeAndroid(e) {
      var qrcode = new QRCode(this.$refs.qrCodeUrlAndroid, {
        text: e, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    //生成二维码  IOS
    creatQrCodeIOS(e) {
      var qrcode = new QRCode(this.$refs.qrCodeUrlIOS, {
        text: e, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    //登录信息
    loginFn() {
      login_infofn()
        .then((res) => {
          /*   this.$store.commit("SETLOGININFO", res.result);
          if (res.result.userType == "3") {
            this.$router.push("/home");
            this.$message({
              message: "登录成功，欢迎您！",
              type: "success",
            });
          } else if (res.result.userType == "4") {
            this.$router.push("/signin");
            this.$message({
              message: "登录成功，欢迎您！",
              type: "success",
            });
          }
return; */
          /* 
qualification 首次注册登录0  审核中4  1审核通过  
*/
          if (res.result.qualification == 1) {
            this.$store.commit("SETLOGININFO", res.result);
            if (res.result.userType == "3") {
              this.$router.push("/home");
              this.$message({
                message: "登录成功，欢迎您！",
                type: "success",
              });
            } else if (res.result.userType == "4") {
              this.$router.push("/signin");
              this.$message({
                message: "登录成功，欢迎您！",
                type: "success",
              });
            }
          } else {
            if (res.result.qualification == 0) {
              this.zz_shenhe = "未审核";
            } else if (res.result.qualification == 4) {
              this.zz_shenhe = "审核中";
            }
            /* 
            15086698531
            */
            this.dialogVisible = true;
            expert_QRCode({
              userType: 2,
            }).then((res2) => {
              if (res2.code == 200) {
                res2.result.forEach((i) => {
                  if (i.type == "ANDROID") {
                    this.creatQrCodeAndroid(i.downloadUrl);
                  } else if (i.type == "IOS") {
                    this.creatQrCodeIOS(i.downloadUrl);
                  }
                });
              }
            });
            return;
          }

          // if (
          //   !res.result.realAuthentication &&
          //   !this.$store.state.realAuthentication
          // ) {
          //   this.dialogVisible = true;
          //   expert_QRCode().then((res) => {
          //     if (res.code == 200) {
          //       console.log(res.result);
          //       this.creatQrCode(res.result.toString());
          //     }
          //   });

          //   this.$store.commit("REALAUTHEN", true);
          // } else {
          //   this.$store.commit("REALAUTHEN", true);
          // }
        })
        .catch((err) => {
          console.log(err, "获取登录信息失败");
        });
    },
    //专家信息
    expertInfn() {
      export_infofn()
        .then((res) => {
          res.result.all =
            res.result.middleReceived +
            res.result.wellReceived +
            res.result.negativeReceived;
          res.result.scoreAvg = Number(res.result.scoreAvg.toFixed(2));
          res.result.wellrate = Number(
            ((res.result.wellReceived / res.result.all) * 100).toFixed(2)
          );
          res.result.middlrate = Number(
            ((res.result.middleReceived / res.result.all) * 100).toFixed(2)
          );
          res.result.negarate = Number(
            ((res.result.negativeReceived / res.result.all) * 100).toFixed(2)
          );
          this.$store.commit("SETEXPERTINFO", res.result);
        })
        .catch((err) => {
          console.log(err, "获取专家信息失败");
        });
    },
    //其他登录方式
    otherLoginFn(i) {},
    //选择登录方式
    choiceLogin(i) {
      this.cueentTab = i;
    },
    //获取验证码
    getCode() {
      const regMobile =
       /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(this.verificationForm.mobile)) {
        get_code(this.verificationForm.mobile)
          .then((res) => {
            if (res?.success) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.timerTf = false;
              this.countDownNum = 60;
              this.timer = setInterval(() => {
                this.countDownNum--;
                if (this.countDownNum <= 0) {
                  this.timerTf = true;
                  clearInterval(this.timer);
                }
              }, 1000);
            }
          })
          .catch((err) => {
            console.log(err, "获取验证码失败");
          });
      } else {
        this.$message.error("手机号格式不正确");
      }
    },
    //登录
    submitForm() {
      let formName = null;
      if (this.cueentTab == 1) {
        formName = "verificationForm"; //验证码登录
      } else {
        formName = "passwordForm"; //密码登录
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "verificationForm") {
            this.codeApi();
          } else {
            this.pswApi();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //验证码登录
    codeApi() {
      this.btnLoading = true;
      code_login(this.verificationForm.code, this.verificationForm.mobile)
        .then((res) => {
          this.btnLoading = false;
          this.$store.commit("SETTOKEN", res.result.accessToken);

          this.successFn();
        })
        .catch((err) => {
          this.btnLoading = false;
          console.log(err, "手机号登录失败");
        });
    },
    //成功登录
    async successFn() {
      await this.loginFn();
      await this.expertInfn();
    },
    //密码登录
    pswApi() {
      this.btnLoading = true;
      psw_login(
        this.passwordForm.username,
        this.$md5(this.passwordForm.password)
      )
        .then((res) => {
          this.btnLoading = false;
          this.$store.commit("SETTOKEN", res.result.accessToken);

          this.successFn();
        })
        .catch((err) => {
          this.btnLoading = false;
          console.log(err, "密码登录失败");
        });
    },
  },
};
</script>
<style lang='less' scoped>
.classQe {
  margin-right: 2.5rem;
}
/deep/.el-dialog {
  min-width: 500px !important;
}
.other_login {
  position: absolute;
  bottom: 50px;
  display: grid;
  width: 246px;
  color: #333333;
  grid-template-columns: repeat(3, 1fr);
  div {
    text-align: center;
  }
  left: 50%;
  transform: translateX(-50%);
}

.other_login div:nth-child(2) {
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}
.privacy {
  color: #d2d2d3;
  font-size: 14px;
  position: absolute;
  bottom: 17px;
  margin: 0 auto;
}
.login_btn {
  background-color: var(--themeCOlor);
  height: 54px;
  border-radius: 4px;
  color: #fff;
  width: 100%;
}
.get_code {
  position: absolute;
  right: 10px;
  top: 104px;
  height: 17px;
  color: var(--themeCOlor);
}
/deep/.el-form-item__content {
  margin: 0 !important;
}
.login_input {
  padding: 32px 0;
}
.login_head {
  font-size: 20px;
  font-weight: bold;
  color: var(--themeCOlor);
  width: 100%;
  .title {
    position: relative;
    font-size: 16px;
    padding-bottom: 17px;
    border-bottom: 2px solid #e9e9e9;
  }
}
.move_right {
  border-bottom: 2px solid var(--themeCOlor) !important;
  animation: rightmove 1s forwards;
}
.move_left {
  border-bottom: 2px solid var(--themeCOlor) !important;
  animation: leftmove 1s forwards;
}
@keyframes rightmove {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateX(197px);
  }
}
@keyframes leftmove {
  0% {
    transform: translate(197px);
  }
  100% {
    transform: translateX(0);
  }
}
.login_box {
  width: 507px;
}
.login {
  width: 100%;
  height: 529px;
  background-color: #fff;
  padding: 68px 56px 0;
}
.logo {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 16px;
  img {
    width: 390px;
    height: 100%;
  }
}
</style>